import React from 'react';
import { Button, Form, Input, InputNumber, Card, Row, Col, Select, DatePicker } from 'antd';
import { useNavigate } from 'react-router-dom';

const { Option } = Select;

export default function CarBillCreate() {
  const [form] = Form.useForm();
  const navigate = useNavigate();

  const handleSave = async () => {
    try {
      const values = await form.validateFields();
      if (values.date && values.date.format) {
        values.date = values.date.format('YYYY-MM-DD HH:mm:ss');
      }
      values.key = Date.now();
      navigate('/car-bill', { state: { newCarBill: values } });
    } catch (e) {}
  };

  return (
    <div style={{ background: '#f5f7fa', minHeight: '100vh', padding: 32 }}>
      <div style={{ maxWidth: 800, margin: '0 auto', background: '#fff', borderRadius: 8, boxShadow: '0 2px 8px rgba(0,0,0,0.04)', padding: 32, position: 'relative' }}>
        <h2 style={{ fontWeight: 700, fontSize: 22, marginBottom: 24 }}>车辆账单新增页面</h2>
        <Form form={form} layout="vertical">
          <Card style={{ borderRadius: 12, marginBottom: 0, padding: 24 }} bodyStyle={{ padding: 0 }}>
            <Row gutter={32}>
              <Col span={12}>
                <Form.Item label="车主姓名" name="owner" rules={[{ required: true, message: '请输入车主姓名' }]} required>
                  <Input placeholder="请输入车主姓名" />
                </Form.Item>
                <Form.Item label="联系方式" name="contact" rules={[{ required: true, message: '请输入联系方式' }]} required>
                  <Input placeholder="请输入联系方式" />
                </Form.Item>
                <Form.Item label="车牌号码" name="plate" rules={[{ required: true, message: '请输入车牌号码' }]} required>
                  <Input placeholder="请输入车牌号码" />
                </Form.Item>
                <Form.Item label="车辆型号" name="model" rules={[{ required: true, message: '请输入车辆型号' }]} required>
                  <Input placeholder="请输入车辆型号" />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="车辆类型" name="type" rules={[{ required: true, message: '请选择车辆类型' }]} required>
                  <Select placeholder="请选择车辆类型">
                    <Option value="包月车">包月车</Option>
                    <Option value="临时车">临时车</Option>
                  </Select>
                </Form.Item>
                <Form.Item label="缴费金额" name="amount" rules={[{ required: true, message: '请输入缴费金额' }]} required>
                  <InputNumber placeholder="请输入缴费金额" style={{ width: '100%' }} min={0} />
                </Form.Item>
                <Form.Item label="缴费时间" name="date" rules={[{ required: true, message: '请选择缴费时间' }]} required>
                  <DatePicker showTime style={{ width: '100%' }} />
                </Form.Item>
              </Col>
            </Row>
          </Card>
        </Form>
        <div style={{ textAlign: 'center', marginTop: 40 }}>
          <Button type="primary" style={{ width: 120, marginRight: 32 }} onClick={handleSave}>保存</Button>
          <Button style={{ width: 120 }} onClick={() => navigate(-1)}>返回</Button>
        </div>
      </div>
    </div>
  );
} 